<template>
    <div>
        <s-table ref="table" :search-params="searchParams" :columns="columns" :async-fc="list" :page="false">
            <template #tableHeader>
                <t-button @click="insert">新增用户</t-button>
            </template>
        </s-table>
        <t-dialog v-model:visible="modalOpen" header="用户信息" @confirm="onModalSubmit">
            <t-form ref="submitFormRef" :rules="FORM_RULES" :data="submitForm">
                <t-form-item label="用户名" name="username">
                    <t-input
                        v-model="submitForm.username"
                        class="form-item-content"
                        type="search"
                        :placeholder="请输入用户名"
                    />
                </t-form-item>
                <t-form-item v-if="!submitForm.id" label="密码" name="password">
                    <t-input
                        v-model="submitForm.password"
                        type="password"
                        class="form-item-content"
                        :placeholder="请输入登录密码"
                    />
                    <template #prefix-icon>
                        <lock-on-icon />
                    </template>
                </t-form-item>
                <t-form-item label="性别" name="sex">
                    <t-select v-model="submitForm.sex" placeholder="请选择性别">
                        <t-option label="男" value="0" />
                        <t-option label="女" value="1" />
                        <t-option label="未知" value="2" />
                    </t-select>
                </t-form-item>
                <t-form-item label="电话号码" name="phone">
                    <t-input-number
                        v-model="submitForm.phone"
                        theme="normal"
                        :placeholder="请输入电话号码"
                        style="width: 100%"
                    />
                </t-form-item>
                <t-form-item label="昵称" name="nickname">
                    <t-input v-model="submitForm.nickname" :placeholder="请输入昵称" />
                </t-form-item>
                <t-form-item label="邮箱" name="email">
                    <t-input v-model="submitForm.email" :placeholder="请输入用户名" />
                </t-form-item>
                <t-form-item label="头像" name="avatar"> </t-form-item>
            </t-form>
        </t-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstanceFunctions } from 'tdesign-vue-next';
import { DialogPlugin, Link, MessagePlugin, Space } from 'tdesign-vue-next';
import { ref } from 'vue';

import { insertApi, deleteById, list, page, updateApi } from '@/api/sysUser';
import STable from '@/components/s-table/index.vue';
import { t } from '@/locales';

import { COLUMNS, FORM_RULES, searchParams } from './props/index';

const modalOpen = ref(false);
const submitForm = ref({});
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<STableInstanceFunction>(null);

const columns = COLUMNS.concat([
    {
        align: 'left',
        fixed: 'right',
        colKey: 'op',
        title: t('components.commonTable.operation'),
        cell: (h, { row }) =>
            h(Space, {}, [
                h(
                    Link,
                    {
                        theme: 'primary',
                        onClick: () => {
                            submitForm.value = row;
                            modalOpen.value = true;
                            console.log(submitForm.value);
                            console.log(modalOpen.value);
                            console.log('点击了修改', row);
                        },
                    },
                    '修改',
                ),
                h(
                    Link,
                    {
                        theme: 'danger',
                        onClick: () => {
                            const confirmDialog = DialogPlugin.confirm({
                                header: `提示`,
                                body: `删除后，${row.nickname}的所有信息将被清空，且无法恢复`,
                                confirmBtn: {
                                    content: '提交',
                                    theme: 'primary',
                                    loading: false,
                                },
                                theme: 'warning',
                                onConfirm: async () => {
                                    confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                                    await deleteById(row.id);
                                    MessagePlugin.success('删除成功');
                                    table.value.onSearch();
                                    confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                                    confirmDialog.hide();
                                },
                            });
                            console.log('点击了删除', row);
                        },
                    },
                    '删除',
                ),
            ]),
    },
]);

const insert = () => {
    modalOpen.value = true;
    submitForm.value = {
        sex: 2,
    };
};

// 添加表单
const onModalSubmit = async () => {
    const valid = await submitFormRef.value.validate();
    if (valid) {
        if (submitForm.value.id) {
            await updateApi(submitForm.value);
        } else {
            await insertApi(submitForm.value);
        }
        MessagePlugin.success('操作成功!');
        modalOpen.value = false;
        table.value.onSearch();
    }
};
</script>
<style lang="less" scoped></style>
